import React, { useContext, useState } from 'react'
import Context from './Context'

export default function ContextDome () {
  const [money, setMoney] = useState(1500000)
  const callback = val => {
    console.log('--val--', val)
  }
  return (
    <div>
      ContextDome
      <hr />
      <Context.Provider value={{ money, callback }}>
        <Son />
      </Context.Provider>
    </div>
  )
}
function Son () {
  return (
    <div>
      son
      <hr />
      <GrandSon />
    </div>
  )
}
function GrandSon () {
  const conxt = useContext(Context)
  return (
    <div>
      GrandSon
      <p>money is {conxt.money}</p>
      <p>
        <button
          onClick={() => {
            conxt.callback(2400000)
          }}
        >
          money+
        </button>
      </p>
    </div>
  )
}
